<script setup>
import {ref} from "vue";
import {get} from "@/net/index.js";
import LightCard from "@/componments/light-card.vue";
import router from "@/router/main.js";
import TopicTag from "@/components/views/forum/TopicTag.vue";
import {ElMessage} from "element-plus";

defineProps({
  show:Boolean
})
const emit = defineEmits(['close'])
function deleteCollect(index, tid) {
  get(`/api/forum/interact?tid=${tid}&type=collect&status=false`, () => {
    ElMessage.success( '已取消收藏！');
    list.value.splice(index,  1)
  })
}
  function init(){
  get("api/forum/collects", data => {
    list.value = data;
  })
  }
const list = ref([])
</script>

<template>
<el-drawer :model-value="show" @close="emit('close')" @open="init" title="我的帖子列表">
  <div class="collect-list">
      <light-card v-for="(item,index) in list" class="topic-card" @click="router.push('/index/topic-detail/'+item.id);emit('close')">
        <topic-tag :type="item.type" />
        <div class="title">{{item.title}}</div>
        <el-link type="danger" @click.stop="deleteCollect(index,item.id)" style="float:right">删除</el-link>
      </light-card>
  </div>
</el-drawer>
</template>

<style scoped>
collect-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic-card {
  background-color: rgba(128, 128, 128, 0.2);
  transition: .3s;
  display: flex;
  justify-content: space-between;
  &:hover {
    background-color: rgba(128, 128, 128, 0.4);
    cursor: pointer;
    scale: 1.02;
  }
}

.title {
  margin-left: 5px;
  font-size: 14px;
  flex: 1;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>